<template>
  <div>
    <el-form :inline="true" size="mini" @submit.native.prevent="GetList">
      <el-form-item>
        <el-button type="primary" @click="$router.push('/cultural-heritage/category-create')">新增非遗项目</el-button>
      </el-form-item>
      <el-form-item label="类型名称">
        <el-input v-model="where['name']"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">查询</el-button>
        <el-button @click="where={};GetList()">清除</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="类型名称"/>
      <el-table-column label="封面图">
        <template slot-scope="scope">
          <img v-if="scope.row.cover" :src="scope.row.cover" alt="封面图" style="width: 120px; height: 120px; object-fit: contain;">
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">{{ ['禁用', '启用', '禁用'][scope.row.status] }}</template>
      </el-table-column>
      <el-table-column prop="publisher_uid" label="添加人"/>
      <el-table-column prop="created_at" label="创建时间"/>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            slot="reference"
            size="mini"
            type="default"
            icon="el-icon-edit"
            @click="$router.push('/cultural-heritage/category-edit/' + scope.row.id)"
          />
          <el-popover
            v-if="scope.row.status === 1"
            v-model="scope.row.showForbidden"
            placement="top"
          >
            <p>确定禁用？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.showForbidden = false">取消</el-button>
              <el-button size="mini" type="primary" @click="Forbidden(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" size="mini" type="danger">禁用</el-button>
          </el-popover>
          <el-popover v-if="scope.row.status === 0" v-model="scope.row.showInvoke" placement="top">
            <p>确定启用？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.showInvoke = false">取消</el-button>
              <el-button size="mini" type="primary" @click="Invoke(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" size="mini" type="success">启用</el-button>
          </el-popover>
          <el-popover v-model="scope.row.showDelete" placement="top">
            <p>确定删除？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="scope.row.showDelete = false">取消</el-button>
              <el-button size="mini" type="primary" @click="Delete(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete"/>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="listInfo.current_page"
      :total="listInfo.total"
      :page-size="listInfo.per_page"
      layout="total, sizes, prev, pager, next, jumper"
      background
      @size-change="size => GetList(1, size)"
      @current-change="(page, size) => GetList(page)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      where: {},
      listInfo: {},
      list: [],
      loading: false
    }
  },
  mounted() {
    this.GetList()
  },
  methods: {
    /**
     * 获取列表
     */
    GetList(page = 1, size) {
      this.loading = true
      size = size || this.listInfo.per_page || 10
      const params = { page, size, ...this.where }
      this.$http.get('cultural_heritage_types', { params }).then(response => {
        this.listInfo = response.meta
        this.list = response.resource
        this.loading = false
      })
    },
    /**
     * 删除
     */
    Delete(vo) {
      this.$http
        .delete('cultural_heritage_types/' + vo.id)
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    },
    Forbidden(vo) {
      this.$http
        .put('cultural_heritage_types/' + vo.id + '/forbidden', { nowStatus: 2 })
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    },
    Invoke(vo) {
      this.$http
        .put('cultural_heritage_types/' + vo.id + '/invoke', { nowStatus: 1 })
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    }
  }
}
</script>

